<template>
  <!-- <div class="tab" @click="handleTabClick($event)">
    太复杂, 数据写死
    <button data-index="0" :class="['item-btn', { 'active': curIdx === 0 }]">选项1</button>
    <button data-index="1" :class="['item-btn', { 'active': curIdx === 1 }]">选项2</button>
    <button data-index="2" :class="['item-btn', { 'active': curIdx === 2 }]">选项3</button>
  </div> -->

  <div
    class="tab"
    @click="handleTabClick($event)"
    v-tab="{
      className: 'item-btn',
      activeClass: 'active',
      curIdx
    }"
  >
    <!-- 使用自定义指令 -->
    <button data-index="0" class="item-btn">选项1</button>
    <button data-index="1" class="item-btn">选项2</button>
    <button data-index="2" class="item-btn">选项3</button>
  </div>
</template>

<script>
import {
  ref
} from 'vue';

import { tab } from './directives';

export default {
  name: 'App',
  directives: {
    tab
  },
  setup(props) {
    const curIdx = ref(0);

    const handleTabClick = (e) => {
      const tar = e.target;
      const className = tar.className;
      // console.log(className);

      if (className === 'item-btn') {
        const index = parseInt(tar.dataset.index);
        
        curIdx.value = index;
      }
    }

    return {
      curIdx,
      handleTabClick
    }
  }
}
</script>

<style>
  .active {
    background-color: #a4ffff
  }
</style>
